<template>
  <div id="webgl"></div>
</template>

<script setup lang="ts">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import gsap from "gsap";
import { onMounted } from "vue";

// 初始化场景
const scene: THREE.Scene = new THREE.Scene();
const width: number = window.innerWidth;
const height: number = window.innerHeight;

// 初始化相机
const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(
  75,
  width / height,
  0.1,
  1000
);
camera.position.set(-3.23, 2.98, 4.06);
camera.updateProjectionMatrix();

// 初始化渲染器
const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({
  antialias: true, // 设置抗锯齿
});
renderer.setSize(width, height);

// 初始化控制器
const controls: OrbitControls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render);
}
render();

onMounted(() => {
  (document.getElementById("webgl") as HTMLElement).appendChild(
    renderer.domElement
  );
});
</script>
